<template>
  <div>
    <el-form :inline="true" :model="formInline" ref="formInline">
      <el-form-item
        label="课程名称 : "
        :rules="[
          { required: true, message: '课程名称不能为空'},
        ]"
        prop="name"
      >
        <el-input v-model="formInline.name" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item
        label="课程价格 : "
        :rules="[
          { required: true, message: '课程价格不能为空'},
          { pattern: /^-?\d+\.?\d*$/, message: '课程价格必须为数字值'}
        ]"
        prop="price"
      >
        <el-input v-model="formInline.price" placeholder="课程价格"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="onSubmit('formInline')">{{btntxt}}</el-button>
        <el-button type="danger" @click="reset('formInline')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格内容 -->
    <el-table :data="tableData" style="width: 800px">
      <el-table-column label="添加日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="课程名称" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.classes }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="课程价格" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.price }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ProductManage",
  data() {
    return {
      formInline: {
        name: "",
        price: ""
      },
      tableData: [
        {
          id:1,
          date: "2016-05-02",
          classes: "Vue实战开发",
          price: "1200"
        },
        {
          id:2,
          date: "2016-05-04",
          classes: "React实战开发",
          price: "1500"
        },
        {
          id:3,
          date: "2016-05-01",
          classes: "web前端基础课程",
          price: "800"
        },
        {
          id:4,
          date: "2016-05-03",
          classes: "java实战开发",
          price: "1000"
        }
      ],
      btntxt: "新增",
      myid: -1 , 
      lastId:0,
    };
  },
  created() {
    this.getProductTableList();
  },
  methods: {
    getProductTableList() {
      if (localStorage.getItem("productTableList")) {
        try {
          this.tableData = JSON.parse(localStorage.getItem("productTableList"));
        } catch (error) {
          console.log(error);
          localStorage.setItem(
            "productTableList",
            JSON.stringify(this.tableData)
          );
        }
      } else {
        localStorage.setItem(
          "productTableList",
          JSON.stringify(this.tableData)
        );
      }
      this.lastId = this.tableData[this.tableData.length-1].id;
      console.log(this.lastId);
      
    },

    setProductTableList() {
      localStorage.setItem("productTableList", JSON.stringify(this.tableData));
    },

    // 新增一个数据 1、push进数组  2、写入localstorage 3、validate 验证
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.btntxt == "新增") {
            this.tableData.push({
              id:++this.lastId,
              date: new Date(),
              classes: this.formInline.name,
              price: this.formInline.price
            });

            this.setProductTableList();
            this.$refs['formInline'].resetFields();

          } else if (this.btntxt == "保存") {
            // console.log("这是保存");
            this.tableData.splice(this.myid, 1, {
              date: new Date(),
              classes: this.formInline.name,
              price: this.formInline.price
            });
            this.setProductTableList();
            this.reset();
          } else {
            this.btntxt = "新增";
          }
        } else {
          console.log("Submit error!");
          return false;
        }
      });
    },

    // 重置清空数据，并将按钮恢复成 “新增”
    reset(formName) {
      his.$refs[formName].resetFields();
      this.btntxt = "新增";
      this.myid = 0;
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.btntxt = "保存";
      this.myid = index;
      this.formInline.name = row.classes;
      this.formInline.price = row.price;
    },
    handleDelete(index, row) {
      // console.log(index, row);
      this.tableData.splice(index, 1);
      this.setProductTableList();
    }
  }
};
</script>

<style scope>

</style>